<template>
  <div class="basicForm">
    <div class="flex justify-start">
      <a-button
        v-for="(item, index) in butData"
        :key="index"
        :type="item.type"
        @click="item.do"
        v-auth="item.auth"
        class="p-2"
      >
        <Icon :icon="item.icon" /> {{ item.title }}
      </a-button>
      <ListSelect
        ref="listSelectRef"
        selectType="materialSelect"
        :checkbox="true"
        @select="handleMaterialSelect"
        v-show="false"
      />
    </div>
    <BasicForm @register="registerForm" />
    <BasicDrawer
      v-bind="$attrs"
      @register="registerHisDrawer"
      :showFooter="true"
      :showOkBtn="false"
      width="80%"
      title="历史记录"
    >
      <HistoryList :projectno="record.projectno" />
    </BasicDrawer>
    <BasicDrawer
      v-bind="$attrs"
      :showFooter="true"
      :showOkBtn="false"
      @register="registerAttachmentDrawer"
      width="80%"
      title="报装附件"
    >
      <AttachmentList :projectno="record.projectno" />
    </BasicDrawer>
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsTestTestDataForm',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref, watch } from 'vue';
  // import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { PmProjectinformation } from '/@/api/proj/info/pmProjectinformation';
  import { formSchemas } from '/@/utils/custom';
  import { Icon } from '/@/components/Icon';
  import { useGlobSetting } from '/@/hooks/setting';
  import { downloadByUrl } from '/@/utils/file/download';
  import { ListSelect } from '/@/components/ListSelect';
  import { useMessage } from '/@/hooks/web/useMessage';
  import HistoryList from '../pmZoneallocationHistory/list.vue';
  import AttachmentList from '../../attachment/pmAttachment/list.vue';
  import { BasicDrawer, useDrawer } from '/@/components/Drawer';

  const { showMessage } = useMessage();

  const props = defineProps({
    schemas: { type: Array, default: [] },
    data: { type: Object, default: {} },
    formConfig: { type: Object, default: {} },
    selectType: { type: String as PropType<string> },
  });

  const listSelectRef = ref<any>(null);

  let inputFormSchemas: FormSchema[] = [];
  const butData = [
    {
      title: '历史记录',
      icon: 'ant-design:history-outlined',
      type: 'text',
      auth: 'btn:task:fp:log:proj',
      do: () => {
        openHisDrawer();
      },
    },
    {
      title: '报装附件',
      icon: 'ant-design:file-text-outlined',
      type: 'text',
      auth: 'btn:task:fp:file:proj',
      do: () => {
        openAttachmentDrawer();
        console.log('报装附件');
      },
    },
    {
      title: '下载任务通知单',
      icon: 'ant-design:download-outlined',
      type: 'text',
      auth: 'btn:proj:task:down:notice',
      do: () => {
        // listSelectRef.value.openSelectModal();
        const { ctxPath } = useGlobSetting();
        downloadByUrl({
          url:
            ctxPath +
            `/ureport/pdf?_u=file:任务通知单.ureport.xml&id=${record.value.id}&_n=（${record.value.projectno}）${record.value.projectname}-任务通知单`,
          target: '_self',
          fileName: `${record.value.projectno}-${record.value.projectname}.pdf`,
        });
      },
    },
    {
      title: '特殊项目匹配',
      icon: 'ant-design:file-text-outlined',
      type: 'text',
      auth: 'btn:proj:task:ts',
      do: () => {
        console.log('特殊项目匹配');
      },
    },
  ];
  watch(
    () => props,
    () => {
      inputFormSchemas = formSchemas(
        props.schemas,
        props.formConfig.formColNum,
        props.data,
      ) as FormSchema[];

      setTimeout(() => {
        zdy(props.data);
      }, 0);
    },
    { immediate: true },
  );

  const record = ref<PmProjectinformation>({} as PmProjectinformation);

  const [registerHisDrawer, { openDrawer: openHisDrawer }] = useDrawer();

  const [registerAttachmentDrawer, { openDrawer: openAttachmentDrawer }] = useDrawer();

  const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm();
  async function zdy(data) {
    setProps({
      labelWidth: 120, // 控件前面的标签宽度
      schemas: inputFormSchemas, // 控件定义列表
      baseColProps: { lg: parseInt(props.formConfig.formColNum), md: 24 },
    });
    await resetFields(); // 重置表单数据
    record.value = data;
    await setFieldsValue(data); // 设置字段值
  }

  async function validateForm() {
    try {
      const data = await validate(); // 验证表单，并返回数据
      return data;
    } catch (error: any) {
      console.log(error);
      if (error && error.errorFields) {
        return false;
      }
    }
  }

  function handleMaterialSelect(values: Recordable[]) {
    console.log(values);
    if (values.length == 0) {
      showMessage(t('请选中要分配的客户'));
      return;
    }
    const selIds = values.map((e) => e.mname).join(',');
    console.log(selIds);
    const { ctxPath } = useGlobSetting();
    downloadByUrl({
      url:
        ctxPath +
        `/ureport/pdf?_u=file:proj_pdcjqr.ureport.xml&id=${record.value.id}&materail=${selIds}`,
      target: '_self',
      fileName: `${record.value.projectno}-${record.value.projectname}.pdf`,
    });
  }

  defineExpose({
    validateForm,
  });
</script>
<style>
  .col {
    color: red;
    font-weight: 100;
  }
</style>
